<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>

<script>

    //获取屏幕可视区域的宽高
    function client(){
        if(window.innerHeight!==undefined){
            return {
                "width":window.innerWidth,
                "height":window.innerHeight
            }
        }else if(document.compatMode==="CSS1Compat"){
            return {
                "width":document.documentElement.clientWidth,
                "height":document.documentElement.clientHeight
            }
        }else{
            return{
                "width":document.body.clientWidth,
                "height":document.body.clientHeight
            }
        }
    }


    //模拟响应式布局：浏览器每次更改大小，判断是否某一标准，然后给背景上色（大于960/640-960/小于640）
    window.onresize=fn;

    function fn(){
        if(client().width>960){
            document.body.style.backgroundColor="lightblue";
        }else if(client().width>640){
            document.body.style.backgroundColor="pink";
        }else{
            document.body.style.backgroundColor="purple";
        }
    }
    fn();
</script>
</body>
</html>